<template>
  <div class="left-widget">
    <div v-for="item in formWidgetList">
      <div class="title">{{ item.title }}</div>
      <ul>
        <n-el tag="li" v-for="child in item.children">
          <i :class="child.icon"></i>
          <span>{{ child.label }}</span>
        </n-el>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { formWidgetList } from '@/utils/widget'
</script>

<style lang="scss" scoped>
.left-widget {
  @apply w-90 bd-r h-full p-2;
  .title {
    @apply bg-black/5 p-2 text-base;
  }
  ul {
    @apply grid grid-cols-3 gap-2.5 p-3;
    li {
      @apply bd p-1.5 text-center rounded-0.5 cursor-pointer active:bg-black/2 select-none;
      @apply transition-all duration-300;
      &:hover {
        color: var(--primary-color);
        border-color: var(--primary-color);
      }
    }
  }
}
</style>
